<template>
    <view>
        <!--
此文件为开发者工具生成，生成时间: 2021/8/16 上午9:23:34
使用方法：
在 D:\project\miniapp-bank\zsnsh\pages\coupon\couponCenter\couponCenter.wxml 引入模板

```
<import src="couponCenter.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
```

在 D:\project\miniapp-bank\zsnsh\pages\coupon\couponCenter\couponCenter.wxss 中引入样式
```
@import "./couponCenter.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
        <block name="skeleton">
            <view class="sk-container">
                <view class="page-container">
                    <view class="banner-container">
                        <image class="banner sk-image"></image>
                    </view>
                    <view class="main-container">
                        <view class="title-container">
                            <text class="title sk-transparent sk-text-13-6364-297 sk-text">省钱券包</text>
                            <text class="sk-transparent sk-text-14-2857-445 sk-text">领券线下购物更优惠</text>
                        </view>
                        <view class="temp-coupon-list">
                            <view class="temp-coupon-item">
                                <view class="temp-coupon-item-left sk-image">
                                    <view class="temp-coupon-discount-info">
                                        <text class="temp-icon-price sk-transparent sk-opacity">￥</text>
                                        <text class="temp-icon-discount sk-transparent sk-opacity">1</text>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-middle" style="border: none">
                                    <view class="temp-coupon-middle-top">
                                        <text class="temp-coupon-type sk-transparent sk-text-25-0000-101 sk-text">自建券</text>
                                        <text class="temp-coupon-name sk-transparent sk-text-14-2857-932 sk-text">满2元可用</text>
                                    </view>
                                    <view class="temp-coupon-middle-bottom">
                                        <view class="sk-transparent sk-text-14-2857-679 sk-text">领取后2天有效</view>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-right sk-pseudo sk-pseudo-circle">
                                    <view class="temp-coupon-buy-price sk-transparent sk-text-13-6364-422 sk-text">免费券</view>
                                    <view class="temp-coupon-right-get sk-transparent sk-image" data-couponid="874584234489282560" data-mchntid="undefined">立即领取</view>
                                </view>
                            </view>
                            <view class="temp-coupon-item">
                                <view class="temp-coupon-item-left sk-image">
                                    <view class="temp-coupon-discount-info">
                                        <text class="temp-icon-price sk-transparent sk-opacity">￥</text>
                                        <text class="temp-icon-discount sk-transparent sk-opacity">1</text>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-middle" style="border: none">
                                    <view class="temp-coupon-middle-top">
                                        <text class="temp-coupon-type sk-transparent sk-text-25-0000-283 sk-text">自建券</text>
                                        <text class="temp-coupon-name sk-transparent sk-text-14-2857-856 sk-text">满2元可用</text>
                                    </view>
                                    <view class="temp-coupon-middle-bottom">
                                        <view class="sk-transparent sk-text-14-2857-668 sk-text">领取后2天有效</view>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-right sk-pseudo sk-pseudo-circle">
                                    <view class="temp-coupon-buy-price sk-transparent sk-text-13-6364-397 sk-text">￥0.01</view>
                                    <view class="temp-coupon-right-get sk-transparent sk-image" data-couponid="875327922253332480" data-mchntid="undefined">立即购买</view>
                                </view>
                            </view>
                            <view class="temp-coupon-item">
                                <view class="temp-coupon-item-left sk-image">
                                    <view class="temp-coupon-discount-info">
                                        <text class="temp-icon-price sk-transparent sk-opacity">￥</text>
                                        <text class="temp-icon-discount sk-transparent sk-opacity">1</text>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-middle" style="border: none">
                                    <view class="temp-coupon-middle-top">
                                        <text class="temp-coupon-type sk-transparent sk-text-25-0000-166 sk-text">自建券</text>
                                        <text class="temp-coupon-name sk-transparent sk-text-14-2857-499 sk-text">满2元可用</text>
                                    </view>
                                    <view class="temp-coupon-middle-bottom">
                                        <view class="sk-transparent sk-text-14-2857-451 sk-text">领取后2天有效</view>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-right sk-pseudo sk-pseudo-circle">
                                    <view class="temp-coupon-buy-price temp-price-point sk-transparent sk-text-22-7273-90 sk-text">10积分+￥0.02</view>
                                    <view class="temp-coupon-right-get sk-transparent sk-image" data-couponid="875327922253332480" data-mchntid="undefined">立即购买</view>
                                </view>
                            </view>
                            <view class="temp-coupon-item">
                                <view class="temp-coupon-item-left sk-image">
                                    <view class="temp-coupon-discount-info">
                                        <text class="temp-icon-price sk-transparent sk-opacity">￥</text>
                                        <text class="temp-icon-discount sk-transparent sk-text-0-0000-1000 sk-text">4.99</text>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-middle" style="border: none">
                                    <view class="temp-coupon-middle-top">
                                        <text class="temp-coupon-type sk-transparent sk-text-25-0000-461 sk-text">自建券</text>
                                        <text class="temp-coupon-name sk-transparent sk-text-14-2857-440 sk-text">满5元可用</text>
                                    </view>
                                    <view class="temp-coupon-middle-bottom">
                                        <view class="sk-transparent sk-text-14-2857-204 sk-text">活动期至2021-08-31 23:59:59</view>
                                    </view>
                                </view>
                                <view class="temp-coupon-item-right sk-pseudo sk-pseudo-circle">
                                    <view class="temp-coupon-buy-price sk-transparent sk-text-13-6364-592 sk-text">免费券</view>
                                    <view class="temp-coupon-right-get sk-transparent sk-image" data-couponid="875758539323473920" data-mchntid="undefined">立即领取</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="sk-loading"></view>
            </view>
        </block>
    </view>
</template>

<style>
/*
此文件为开发者工具生成，生成时间: 2021/8/16 上午9:23:34

在 D:\project\miniapp-bank\zsnsh\pages\coupon\couponCenter\couponCenter.wxss 中引入样式
```
@import "./couponCenter.skeleton.css";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    color: transparent !important;
}
.sk-text-13-6364-297 {
    background-image: linear-gradient(transparent 13.6364%, #eeeeee 0%, #eeeeee 86.3636%, transparent 0%) !important;
    background-size: 100% 44rpx;
    position: relative !important;
}
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
}
.sk-text-14-2857-445 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-opacity {
    opacity: 0 !important;
}
.sk-text-25-0000-101 {
    background-image: linear-gradient(transparent 25%, #eeeeee 0%, #eeeeee 75%, transparent 0%) !important;
    background-size: 100% 40rpx;
    position: relative !important;
}
.sk-text-14-2857-932 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
}
.sk-text-14-2857-679 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-13-6364-422 {
    background-image: linear-gradient(transparent 13.6364%, #eeeeee 0%, #eeeeee 86.3636%, transparent 0%) !important;
    background-size: 100% 44rpx;
    position: relative !important;
}
.sk-text-25-0000-283 {
    background-image: linear-gradient(transparent 25%, #eeeeee 0%, #eeeeee 75%, transparent 0%) !important;
    background-size: 100% 40rpx;
    position: relative !important;
}
.sk-text-14-2857-856 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
}
.sk-text-14-2857-668 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-13-6364-397 {
    background-image: linear-gradient(transparent 13.6364%, #eeeeee 0%, #eeeeee 86.3636%, transparent 0%) !important;
    background-size: 100% 44rpx;
    position: relative !important;
}
.sk-text-25-0000-166 {
    background-image: linear-gradient(transparent 25%, #eeeeee 0%, #eeeeee 75%, transparent 0%) !important;
    background-size: 100% 40rpx;
    position: relative !important;
}
.sk-text-14-2857-499 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
}
.sk-text-14-2857-451 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-22-7273-90 {
    background-image: linear-gradient(transparent 22.7273%, #eeeeee 0%, #eeeeee 77.2727%, transparent 0%) !important;
    background-size: 100% 44rpx;
    position: relative !important;
}
.sk-text-0-0000-1000 {
    background-image: linear-gradient(transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0%) !important;
    background-size: 100% 40rpx;
    position: relative !important;
}
.sk-text-25-0000-461 {
    background-image: linear-gradient(transparent 25%, #eeeeee 0%, #eeeeee 75%, transparent 0%) !important;
    background-size: 100% 40rpx;
    position: relative !important;
}
.sk-text-14-2857-440 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
}
.sk-text-14-2857-204 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-13-6364-592 {
    background-image: linear-gradient(transparent 13.6364%, #eeeeee 0%, #eeeeee 86.3636%, transparent 0%) !important;
    background-size: 100% 44rpx;
    position: relative !important;
}
.sk-image {
    background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
    background: #efefef !important;
    background-image: none !important;
    color: transparent !important;
    border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
    border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
    border-radius: 50% !important;
}
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}

@keyframes flush {
    0% {
        left: -100%;
    }
    50% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}
.sk-loading {
    animation: flush 2s linear infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
}
</style>
